<template>
  <view>
    <view v-if="loading" class="skeleton" :class="{ animate: animate }"  :style="{ justifyContent: flexType}">
			<!-- 轮播图 -->
			<view
			  v-if="imgTitle"
			  class="skeleton-imgTitle"
			  style="width: 95%;border-radius: 10px;height: 100px;display: block;"
			></view>
			<!-- 头像图 -->
      <view
        v-if="showAvatar && !imgTitle"
        class="skeleton-avatar"
				v-for="(item, index) in nameRow"
				:key="index"
        :class="[avatarShape,avatarIndex]"
        :style="{ width: avatarSize, height: avatarSize}"
      >
			<view v-if="index_qs">
				<view class="skeleton-avatar index-locg index-hot-img"></view>
				<view class="skeleton-avatar index-locg index-hot-button"></view>
			</view>
				
			</view>
			<!-- 文字条 -->
      <view class="skeleton-content" v-if="showTitle  && !imgTitle">
        <view  class="skeleton-title" :style="{ width: titleWidth,height:height+'rpx','border-radius':border_fist+'rpx','margin-left':marginleft_top+'rpx','margin-top':margintop+'rpx'}" style='' ></view>
				<view class="skeleton-rows">
          <view
            class="skeleton-row-item"
            v-for="(item, index) in rowList"
            :key="index"
            :style="{ width: item.width,'border-radius':border+'rpx',height:height_bottem+'rpx','margin-left':marginleft_top+'rpx'}"
						style='margin-top: 20rpx;'
          ></view>
        </view>
      </view>
			<!-- 循环flex文字条 -->
			<view class="skeleton-content" v-if="flex_title">
				<view style="display: flex;align-items: center;margin-left: -50rpx;">
					<view
						class="skeleton-row-item"
						v-for="(item, index) in flex_rowList"
						:key="index"
						:style="{ width: item.width,'border-radius':border+'rpx',height:height_bottem+'rpx','margin-left':marginleft+'rpx'}"
						style='margin-top: 0rpx;'
					></view>
				</view>
			</view>
			<view class="skeleton-content" v-if="flex_title_dd">
				<view style="display: flex;align-items: center;margin-left: -50rpx;" :style="{'margin-top':margin_top_dd+'rpx'}">
					<view
						class="skeleton-row-item"
						v-for="(item, index) in flex_rowList_dd"
						:key="index"
						:style="{ width: item.width,'border-radius':border+'rpx',height:height_bottem+'rpx','margin-left':item.marginleft+'rpx'}"
						style='margin-top: 0rpx;'
					></view>
				</view>
			</view>
    </view>
    <view v-else><slot></slot></view>
  </view>
</template>

<script>
const DEFAULT_ROW_WIDTH = '100%'
const DEFAULT_LAST_ROW_WIDTH = '60%'

export default {
  props: {
    loading: {
      type: Boolean,
      default: true,
    },
		imgTitle: {
		  type: Boolean,
		  default: false,
		},
		nameRow:{
			type: Number,
			default: 1,
		},
		flexType:{
			type: String,
			default: 'flex-start', // center	居中	√		space-between	两端对齐	√		space-around	子元素拉手分布	√		flex-start	居左		flex-end	居右
		},
    showAvatar: {
      type: Boolean,
      default: true,
    },
    avatarSize: {
      type: String,
      default: '50px',
    },
    avatarShape: {
      type: String,
      default: 'round', // square | round
    },
    showTitle: {
      type: Boolean,
      default: false,
    },
    titleWidth: {
      type: String,
      default: '40%',
    },
    row: {
      type: Number,
      default: 3,
    },
    animate: {
      type: Boolean,
      default: true,
    },
		height:{
			type:Number,
			default:50
		},
		border:{
			type:Number,
			default:0
		},
		border_fist:{
			type:Number,
			default:0
		},
		height_bottem:{
			type:Number,
			default:20
		},
		flex_title:{
			type:Boolean,
			default:false
		},
		flex_row:{
			type:Number,
			default:2
		},
		marginleft:{
			type:Number,
			default:20
		},
		marginleft_top:{
			type:Number,
			default:0
		},
		width:{
			type:String,
			default:'40%'
		},
		flex_title_dd:{
			type:Boolean,
			default:false
		},
		width_dd:{
			type:String,
			default:'40%'
		},
		width_dd1:{
			type:String,
			default:'40%'
		},
		flex_row_dd:{
			type:Number,
			default:0
		},
		width_flex:{
			type:String,
			default:'10%'
		},
		margintop:{
			type:Number,
			default:5
		},
		marginleft_two:{
			type:Number,
			default:20
		},
		margin_top_dd:{
			type:Number,
			default:0
		},
		index_qs:{
			type:Boolean,
			default:false
		},
		avatarIndex:{
			type:String,
			default:""
		}
		
  },
  data() {
    return {}
  },
  computed: {
    rowList() {
      let list = []
      for (let i = 0; i < this.row; i++) {
        list.push({
					width:this.width
          // width: i === this.row - 1 && i !== 0 ? DEFAULT_LAST_ROW_WIDTH : DEFAULT_ROW_WIDTH,
        })
      }
      return list
    },
		flex_rowList(){
			let list = []
			for(let i=0;i<this.flex_row;i++){
				list.push({
					width:this.width_flex
				})
			}
			return list
		},
		flex_rowList_dd(){
			let list = []
			let width = ''
			let marginleft = this.marginleft
			width = this.width_dd
			for(let i=0;i<this.flex_row;i++){
				list.push({
					width:width	,
					marginleft:marginleft
				},
				)
				marginleft = this.marginleft_two
				width = this.width_dd1
			}
			return list
		}
  },
}
</script>

<style scoped>
.skeleton {
  display: flex;
  margin: 16px;
  --bg-color: #f2f3f5;
  --row-height: 16px;
  --row-margin-top: 16px;
}
.skeleton-imgTitle {
  flex-wrap: wrap;
	  background: var(--bg-color);
		margin: 10px auto;
	
}
.skeleton-avatar {
  flex-shrink: 0;
  background: var(--bg-color);
  margin-right: 8px;
}
.skeleton-avatar.round {
  border-radius: 50%;
}

.skeleton-content {
  width: 100%;
}

.skeleton-title {
  background-color: var(--bg-color);
  height: var(--row-height);
}

.skeleton-title + .skeleton-rows {

}

.skeleton-rows {
}

.skeleton-row-item {
  background-color: var(--bg-color);
  height: var(--row-height);
}
.skeleton-row-item:not(:first-child) {
  margin-top: var(--row-margin-top);
}

.skeleton.animate {
  animation: skeleton-blink 1.2s ease-in-out infinite;
}
.index-locg{
		background: #FFFFFF;
		width: 30px;
		height: 30px;
		margin: 0 auto;
}
@keyframes skeleton-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
.avatar-moofd{
	border-radius: 16rpx;
	height: 238rpx!important;
	width: 27.6%!important;
}
.index-hot-img{
	border-radius: 100%;
	width: 80rpx;
	height: 80rpx;
	margin-top: 24rpx;
}
.index-hot-button{
	height: 52rpx;
	width: 80%;
	margin-top: 50rpx;
	border-radius: 8rpx;
}
</style>
